<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<style>
		ul{
			width: 500px;
			margin: 20px auto;
			list-style: none;
			display: flex;
			justify-content: space-around;
		}
		li{
			width: 50px;
			height: 50px;
			background-color: #ccc;
			text-align: center;
			line-height: 50px;			
		}
		h1{
			color: red;
		}
	</style>
</head>
<body>
	<!-- ajax
	 ajax  是前后交互的能力，是客户端给服务器端发送的消息的工具。
	    默认是异步
	特点：
	1、可以不需要插件，就可以使用
	2、用户体验好，不需要刷新页面就可以更新数据
	3、减轻服务器和宽带的负担
	缺点：
	搜索引擎的支持度不高（因为数据都不在页面上，搜索引擎搜索不到）
	操作流程:
	 1、通过页面将数据库中的数据取出来；
	 2、取出后转成json 格式的字符串，利用ajax把字符串返还给前台；
	 3、渲染到页面上；
	
	使用
	
	1、创建一个ajax请求对象
	2、配置链接信息
	open()
	()   有三个参数
	method    提交的方式    get    post
	url      接口
	本次请求是否异步   true   异步（默认）     false 同步
	3、发送请求
	xhr.send()
	 
	 
	 ajax  状态码    
	   readyState 用来表示ajax请求的全部过程中的某一个状态
	 0：表示未初始化完成，也就是open方法为执行
	 1：表示配置信息已完成
	 2：send()方法已经执行完
	 3：表示正在解析相应的内容
	 4：响应内容全部解析完毕，成功
	 
	 readyState  == 4  才可以正常使用服务端给的数据
	 
	 status  网络状态码
	 responseText   响应的内容
	
	 readyStateChange  事件
	 专门用来监听Ajax对象的readyState值改变的行为
	 
	 
	 
	 
	 

	 -->
	 <ul>
		 <li>1</li>
		 <li>2</li>
		 <li>3</li>
	 </ul>
	 <div>
		<!-- <h1></h1>
		 <p></p> -->
	 </div>
</body>
<script>
	var div = document.getElementsByTagName('div')[0];
	var li = document.getElementsByTagName('li');
	for(var i = 0; i < li.length; i++){
		li[i].index = i;
		li[i].onclick = function(){
			ajax(this.index);
		}
	}
	function ajax(index){
		var xhr = new XMLHttpRequest();
		var Arry = ['1.json','2.json','3.json']
		// xhr.open("get",'1.json');
		xhr.open('get',Arry[index])
		xhr.send()
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4 &&  xhr.status == 200){
				// console.log(xhr.responseText);
				var arr = JSON.parse(xhr.responseText)
				// console.log(arr);
				var arry = arr.showapi_res_body.contentlist;
				console.log(arry);
				var str = ''
				for(var i = 0; i < arry.length; i++){
					console.log(arry[i]);
					str += `
						<h1>${arry[i].title}</h1>
						<p>${arry[i].text}</p>
					`
					div.innerHTML = str
					
				}
			}
		}
		
	}
	
	
	
	
	
</script>
</html>